<template>
	<view class="deviceadd">
		<view class="title">门店ID</view>
		<view class="content">
			<view class="item">
				<input type="text" placeholder="请输入您的门店ID" v-model="suid" />
			</view>
			<view class="item">
				<input type="text" placeholder="请选择商圈" v-model="tarShopmhome.cm_shop_name" disabled="true" />
				<picker mode="selector" :range="rangArr" @change="shopmSure($event)">
					<image src="../../static/img/ic_pulldown.png"></image>
				</picker>
			</view>
		</view>
		<button type="primary" @click="shopmbindFun()">绑定</button>
		
		<!-- 申请原因弹窗 -->
		<!-- <uni-popup ref="popup" :show="true" type="center" :maskClick="false">
			<view class="zlpopup">
				<view class="zlpopup_title">提示</view>
				<view class="zlpopup_con">
					<view>{{context}}</view>
					<input type="text" placeholder="请输入申请原因" v-model="reason" />
				</view>
				<view class="zlpopup_btn">
					<view class="btn_cancel" @click="popClose(false)">取消</view>
					<view class="btn_confirm" @click="popClose(true)">确定</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import { shopmhome,shopmbind,shopmadd } from '../../api/index.js'
	// import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				suid:'',//门店id
				rangArr:[],
				shopmhomeData:'',
				tarShopmhome:{//商圈
					cmhome_shop_id:'',
					cm_shop_name:''
				},
				reason:'',
				context:'当前商圈超出门店最大服务范围,如需加入商圈，请申请'
			}
		},
		onLoad:function(data){
			if(data.id){
				this.suid = data.id
			}
			this.getShopmhome()
		},
		methods: {
			//获取所有商圈
			getShopmhome:function(){
				let that = this;
				shopmhome().then((res) => {
					console.log(res);
					if(res.code == 0){
						that.shopmhomeData = res.data;
						that.rangArr = res.data.map((item,index,arr)=>{
							return item.cm_shop_name;
						});
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			//选择商圈
			shopmSure:function(e){
				let index = e.target.value;
				this.tarShopmhome = this.shopmhomeData[index];
			},
			//绑定商圈
			shopmbindFun:function(){
				let that = this;
				if(!this.suid){
					uni.showToast({
						title: '请输入门店ID号',
						icon: 'none'
					});
					return ;
				}else if(!this.tarShopmhome.cmhome_shop_id){
					uni.showToast({
						title: '请选择商圈',
						icon: 'none'
					});
					return ;
				}
				
				shopmbind({
					suid: that.suid,
					cm_home_id: that.tarShopmhome.cmhome_shop_id
				}).then((res)=>{
					console.log(res);
					if(res.code == 0){
						if(res.data.status == 2){ //假如商户与超盟之家距离超过1.5km
							that.context = res.data.comment
							uni.showModal({
								title:'提示',
								content: that.context,
								success:(dataCm)=>{
									//点击了确定按钮
									if(dataCm.confirm === true){
										that.shopmaddFun()
									}
								}
							})
							// that.popOpen()
						}else{
							that.shopmaddFun()
						}
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			//商圈添加
			shopmaddFun:function(){
				shopmadd({
					id: this.suid,
					cmhome_shop_id: this.tarShopmhome.cmhome_shop_id
				}).then((res)=>{
					console.log(res);
					if(res.code == 0){
						uni.showModal({
							title:'提示',
							content: res.msg,
							complete:function(){
								uni.navigateBack({
									
								})
							}
						})
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			// popOpen:function(){
			//     this.$refs.popup.open()
			// },
			// popClose:function(isconfirm){
			// 	if(isconfirm){
			// 		this.shopmaddFun()
			// 	}
			//     this.$refs.popup.close()
			// }
		},
		// components:{
			// uniPopup
		// }
	}
</script>

<style lang="scss" scoped>
	.deviceadd{
		padding: 0 60rpx;
		border-top: 1rpx solid $uni-solid-color;
		font-size: $uni-font-size-base;
		.title{
			margin-top: 90rpx;
			font-weight: bold;
			font-size: 56rpx;
		}
		.content{
			margin-top: 90rpx;
			
			.item{
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid $uni-solid-color;
				align-items: center;
				justify-content: space-between;
				input{
					width: 100%;
					font-size: $uni-font-size-base;
					padding-bottom: 15rpx;
				}
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			
		}
		button{
			margin-top: 60rpx;
		}
		// .zlpopup{
		// 	background-color: #FFFFFF;
		// 	width: 550rpx;
		// 	margin: 0 auto;
		// 	font-size: $uni-font-size-lg;
		// 	border-radius: $uni-border-radius-lg;
		// 	.zlpopup_title{
		// 		text-align: center;
		// 		font-weight: bold;
		// 		padding: 30rpx 0;
		// 	}
		// 	.zlpopup_con{
		// 		box-sizing: border-box;
		// 		width: 100%;
		// 		padding: 0 45rpx 0 45rpx;
		// 		height: 250rpx;
		// 		input{
		// 			background-color: #F5F5F5;
		// 			box-sizing: border-box;
		// 			font-size: $uni-font-size-base;
		// 			padding: 20rpx;
		// 			width: 100%;
		// 			text-align: left;
		// 			height: 80px;
		// 			border-radius: 4px;
		// 			border: 1rpx solid #CCCCCC;
		// 			margin-top: 20rpx;
		// 		}
		// 	}
		// 	.zlpopup_btn{
		// 		display: flex;
		// 		border-top: 1rpx solid $uni-border-color-e5;
		// 		view{
		// 			padding: 20rpx 0;
		// 			text-align: center;
		// 			width: 50%;
		// 			&.btn_confirm{
		// 				border-left: 1rpx solid $uni-border-color-e5;
		// 				color: #007AFF;
		// 			}
		// 		}
		// 	}
		// }
	}
</style>
